<template>
    <v-chart :option="option" autoresize></v-chart>
</template>

<script>
export default {
    name: "z-customer-chart",
    props: {
        type: {
            type: Number,
            default: 0
        }
    },
    watch: {
        type() {
            if (this.type == 0) {
                this.option.xAxis.data = [
                    "01-01",
                    "01-02",
                    "01-03",
                    "01-04",
                    "01-05",
                    "01-06",
                    "01-07"
                ];
                this.option.series[0].data = [550, 132, 101, 400, 90, 230, 210];
                this.option.series[1].data = [
                    220,
                    182,
                    500,
                    234,
                    290,
                    600,
                    310
                ];
                this.option.series[2].data = [
                    500,
                    232,
                    201,
                    154,
                    190,
                    330,
                    410
                ];
                this.option.series[3].data = [
                    400,
                    332,
                    301,
                    800,
                    390,
                    763,
                    320
                ];
            } else if (this.type == 1) {
                this.option.xAxis.data = [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6",
                    "7",
                    "8",
                    "9",
                    "10",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                    "25",
                    "26",
                    "27",
                    "28",
                    "29",
                    "30",
                    "31"
                ];
                this.option.series[0].data = [
                    600,
                    432,
                    534,
                    654,
                    753,
                    453,
                    643,
                    600,
                    432,
                    534,
                    654,
                    753,
                    453,
                    643,
                    600,
                    432,
                    534,
                    654,
                    753,
                    453,
                    643,
                    600,
                    432,
                    534,
                    654,
                    753,
                    453,
                    643,
                    753,
                    453,
                    643
                ];
                this.option.series[1].data = [
                    543,
                    456,
                    453,
                    654,
                    335,
                    345,
                    324,
                    543,
                    456,
                    453,
                    654,
                    335,
                    345,
                    324,
                    543,
                    456,
                    453,
                    654,
                    335,
                    345,
                    324,
                    543,
                    456,
                    453,
                    654,
                    335,
                    345,
                    324,
                    335,
                    345,
                    324
                ];
                this.option.series[2].data = [
                    432,
                    543,
                    556,
                    1454,
                    543,
                    567,
                    433,
                    432,
                    543,
                    556,
                    1454,
                    543,
                    567,
                    433,
                    432,
                    543,
                    556,
                    1454,
                    543,
                    567,
                    433,
                    432,
                    543,
                    556,
                    1454,
                    543,
                    567,
                    433,
                    543,
                    567,
                    433
                ];
                this.option.series[3].data = [
                    234,
                    543,
                    654,
                    954,
                    544,
                    854,
                    543,
                    234,
                    543,
                    654,
                    954,
                    544,
                    854,
                    543,
                    234,
                    543,
                    654,
                    954,
                    544,
                    854,
                    543,
                    234,
                    543,
                    654,
                    954,
                    544,
                    854,
                    543,
                    544,
                    854,
                    543
                ];
            } else if (this.type == 2) {
                this.option.xAxis.data = [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6",
                    "7",
                    "8",
                    "9",
                    "10",
                    "11",
                    "12"
                ];
                this.option.series[0].data = [
                    853,
                    3242,
                    5332,
                    4322,
                    5324,
                    4553,
                    5432,
                    853,
                    3242,
                    5332,
                    4322,
                    5324
                ];
                this.option.series[1].data = [
                    4323,
                    4322,
                    4223,
                    4234,
                    4234,
                    4324,
                    4233,
                    4323,
                    4322,
                    4223,
                    4234,
                    4234
                ];
                this.option.series[2].data = [
                    4234,
                    4324,
                    4234,
                    4243,
                    4244,
                    4244,
                    4224,
                    4234,
                    4324,
                    4234,
                    4243,
                    4244
                ];
                this.option.series[3].data = [
                    2342,
                    2344,
                    4244,
                    4324,
                    5432,
                    4533,
                    4323,
                    2342,
                    2344,
                    4244,
                    4324,
                    5432
                ];
            }
        }
    },
    data() {
        return {
            option: {
                color: [
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(37, 161, 229, 1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(37, 161, 229, 0)"
                            }
                        ]
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(237,66,122,1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(237,66,122,0)"
                            }
                        ]
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(247,246,139,1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(247,246,139,0)"
                            }
                        ]
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(98,204,150,1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(98,204,150,0)"
                            }
                        ]
                    }
                ],
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(20, 31, 59, 0.7)",
                    textStyle: {
                        color: "#fff"
                    }
                },
                legend: {
                    itemGap: 25,
                    textStyle: {
                        color: "#70C5FF"
                    },
                    data: ["男", "女", "新", "老"]
                },
                grid: {
                    top: "40px",
                    left: "50px",
                    right: "25px",
                    bottom: "40px"
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "01-01",
                        "01-02",
                        "01-03",
                        "01-04",
                        "01-05",
                        "01-06",
                        "01-07"
                    ],
                    axisLabel: {
                        textStyle: {
                            color: "#70C5FF"
                        }
                    }
                },
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#70C5FF"
                        }
                    }
                },
                series: [
                    {
                        name: "男",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series"
                        },
                        data: [550, 132, 101, 400, 90, 230, 210]
                    },
                    {
                        name: "女",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series"
                        },
                        data: [220, 182, 500, 234, 290, 600, 310]
                    },
                    {
                        name: "老",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series"
                        },
                        data: [500, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: "新",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series"
                        },
                        data: [400, 332, 301, 800, 390, 763, 320]
                    }
                ]
            }
        };
    }
};
</script>